import React from 'react'
import { NavBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { Tabs } from 'react-vant'

import Costs from '../component/Costs'
import Paymentrecord from '../component/Paymentrecord'
import Querybill from '../component/Querybill'
import IDcheck from '../component/IDcheck'

import { VolumeO } from '@react-vant/icons'
import { NoticeBar } from 'react-vant'

export default function Wef() {

    const navigate = useNavigate();

    return (
        <div>
            <NavBar onBack={() => { navigate("/Lifepay") }}>水电燃气充值</NavBar>
            <NoticeBar
                leftIcon={<VolumeO />}
                text='水电燃气 优惠充值 快速到账 活动优惠,无月租、无最低消费'
            />

            <Tabs border type='capsule'>
                <Tabs.TabPane key={1} title={'充值'}>
                    <Costs></Costs>
                </Tabs.TabPane>
                <Tabs.TabPane key={2} title={'充值记录'}>
                    <Paymentrecord></Paymentrecord>
                </Tabs.TabPane>
                <Tabs.TabPane key={3} title={'缴费账单'}>
                    <Querybill></Querybill>
                </Tabs.TabPane>
                <Tabs.TabPane key={4} title={'个人订单'}>
                    <IDcheck></IDcheck>
                </Tabs.TabPane>
            </Tabs>



        </div>
    )
}
